<template>
  <div class="app-container">
    <Find :formList="formList" @findClicked="findClicked" @selectChange="selectChange" />
    <div class="container mt10 flex">
      <el-card shadow="never" :body-style="{ padding: '10px' }" style="margin-right: 20px">
        <div slot="header" class="mb9 f16">
          <span style="font-weight: 600; margin-left: 10px">分类资料</span>
        </div>
        <Table :tableData="tableData" :tableHeader="tableHeader" :isLoading="isLoading" @currentRow="currentRow" />
      </el-card>

      <el-card shadow="never" :body-style="{ padding: '10px' }">
        <div slot="header" class="mb9 f16">
          <span style="font-weight: 600">型体生产工艺</span>
        </div>
        <Table :tableData="tableData2" :tableHeader="tableHeader2" />
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import fileRequest from '@/utils/fileRequest'
import service from '@/utils/request'
import { debounce } from 'lodash'
import { defineComponent, onMounted, ref, watch } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'FacingMaterial'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const formList = ref<any>([
  {
    type: 'select',
    selectValue: '',
    selectP: '大类名称 大类代码',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '中类名称 中类代码',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '小类名称 小类代码',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入英文名称',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入物料编码',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入宽幅',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入单位',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入供应商',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入建档用户',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  }
])

const tableHeader = ref([
  {
    label: '大类',
    prop: 'typeName',
    width: '94'
  },
  {
    label: '中类',
    prop: 'midTypeName',
    width: '94'
  },
  {
    label: '小类',
    prop: 'smallTypeName',
    width: '94'
  }
])
const tableHeader2 = ref([
  {
    label: '物料编码',
    prop: 'mtlNo',
    width: '151'
  },
  {
    label: '材料名称',
    prop: 'mtlName',
    width: '200'
  },
  {
    label: '英文名称',
    prop: 'engName',
    width: '200'
  },
  {
    label: '款幅',
    prop: 'mtlSpec',
    width: '151'
  },
  {
    label: '单位',
    prop: 'mtlUnit',
    width: '151'
  },
  {
    label: '供应商',
    prop: 'vendor',
    width: '151'
  },
  {
    label: '建档用户',
    prop: 'sysUser',
    width: '151'
  },
  {
    label: '失效日期',
    prop: 'uneffectDate',
    width: '151'
  }
])
const tableData2 = ref([])

// 表一模块
// '置空'按钮
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
    getTableList()
  }
  if (content === '导出') {
    let bigCategory = formList.value.find(
      (item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '大类名称 大类代码'
    )?.selectValue
    if (bigCategory) bigCategory = bigCategory.split(' ')[0]
    let midCategory = formList.value.find(
      (item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '中类名称 中类代码'
    )?.selectValue
    if (midCategory) midCategory = midCategory.split(' ')[0]
    let smallCategory = formList.value.find(
      (item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '小类名称 小类代码'
    )?.selectValue
    if (smallCategory) smallCategory = smallCategory.split(' ')[0]

    const res = (await fileRequest.post(`/pack/downloadPcPackMtl`, {
      midTypeName: midCategory,
      smallTypeName: smallCategory,
      typeName: bigCategory
    })) as any
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    const FileName = decodeURI(res.headers['content-disposition'].split(`utf-8''`)[1])
    link.download = FileName //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
}
const tableData = ref([])
const isLoading = ref(true)

// 获取表数据
const getTableList = debounce(async () => {
  let bigCategory = formList.value.find(
    (item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '大类名称 大类代码'
  )?.selectValue
  if (bigCategory) bigCategory = bigCategory.split(' ')[0]
  let midCategory = formList.value.find(
    (item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '中类名称 中类代码'
  )?.selectValue
  if (midCategory) midCategory = midCategory.split(' ')[0]
  let smallCategory = formList.value.find(
    (item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '小类名称 小类代码'
  )?.selectValue
  if (smallCategory) smallCategory = smallCategory.split(' ')[0]

  isLoading.value = true
  let tableDataList = await service.post<any, any>('/pack/mtl/getPcPackFaceMtl', {
    midTypeName: midCategory,
    smallTypeName: smallCategory,
    typeName: bigCategory
  })
  isLoading.value = false
  tableData.value = tableDataList.list
  currentRow()
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)

// 大类 中类 小类获取下拉框数据
const getSelectList = async (mid: any = '', small: any = '') => {
  let res = await service.get<any, any>('/back/mtlTypeLMSQuery', {
    params: {
      mtlType: small ? small : mid
    }
  })
  if (small) {
    formList.value
      .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '小类名称 小类代码')
      ?.selectOptions.splice(0)
    res.forEach((item: any, index: any) => {
      formList.value
        .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '小类名称 小类代码')
        ?.selectOptions?.push({
          optionKey: index,
          optionValue: `${item.typeName}  ${item.typeNo}`,
          optionLabel: `${item.typeName}`,
          LeftLabel: `${item.typeName}`,
          RightLabel: `${item.typeNo}`
        })
    })
  } else if (mid) {
    formList.value
      .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '中类名称 中类代码')
      ?.selectOptions.splice(0)
    res.forEach((item: any, index: any) => {
      formList.value
        .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '中类名称 中类代码')
        ?.selectOptions?.push({
          optionKey: index,
          optionValue: `${item.typeName}  ${item.typeNo}`,
          optionLabel: `${item.typeName}`,
          LeftLabel: `${item.typeName}`,
          RightLabel: `${item.typeNo}`
        })
    })
    console.log(
      11111111,
      formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '中类名称 中类代码')
        ?.selectOptions
    )
  } else {
    formList.value
      .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '大类名称 大类代码')
      ?.selectOptions.splice(0)
    res.forEach((item: any, index: any) => {
      formList.value
        .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '大类名称 大类代码')
        ?.selectOptions?.push({
          optionKey: index,
          optionValue: `${item.typeName}  ${item.typeNo}`,
          optionLabel: `${item.typeName}`,
          LeftLabel: `${item.typeName}`,
          RightLabel: `${item.typeNo}`
        })
    })
  }
}
onMounted(() => {
  getSelectList()
})
const selectChange = (val: any, selectP: any) => {
  if (selectP === '大类名称 大类代码') {
    getSelectList(formList.value[0].selectValue.split('  ')[1])
    formList.value[1].selectValue = ''
    formList.value[2].selectValue = ''
  }
  if (selectP === '中类名称 中类代码') {
    getSelectList('', formList.value[1].selectValue.split('  ')[1])
  }
}

// 点击表给另一张表传数据
const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {
  let { typeNo }: any = row
  // 给表二传指令号
  let table2Data = await service.post<any, any>(`/pack/mtl/getPcPackFaceMtlDeTail`, {
    engName: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入英文名称'
    )?.inputValue,
    mtlName: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入材料名称'
    )?.inputValue,
    mtlNo: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入物料编码'
    )?.inputValue,
    mtlSpec: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入宽幅'
    )?.inputValue,
    mtlUnit: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入单位'
    )?.inputValue,
    sysUser: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入建档用户'
    )?.inputValue,
    typeNo,
    vendor: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入供应商'
    )?.inputValue
  })
  tableData2.value = table2Data.list
}
</script>

<style lang="less" scoped>
:deep(.el-form-item:nth-child(1)) {
  .el-select {
    width: 200px;
    height: 28px;
  }
}

:deep(.el-form-item:nth-child(2)) {
  .el-select {
    width: 200px;
    height: 28px;
  }
}

:deep(.el-form-item:nth-child(3)) {
  .el-select {
    width: 200px;
    height: 28px;
  }
}

.btns {
  display: flex;
  justify-content: end;

  .bg {
    background-color: #e7e7e7;
    border: 1px solid #e7e7e7;
    color: #000000;
  }
}
</style>
